<template>
  <div>
    <h3>reactive</h3>
    <!-- <p>{{ num }}</p>
    <p>{{ name }}</p> -->

    <p>{{ state.num }}</p>
    <p>{{ state.name }}</p>

    <button @click="fn">btn</button>
  </div>
</template>

<script>
// import { ref } from "vue";
import { reactive } from "vue";
export default {
  setup() {
    // const num = ref(4);
    // const name = ref("zhangsan");
    // return {
    //   num,
    //   name,
    // };

    // 用来一次性的定义多个变量,并且也具有响应式
    const state = reactive({
      num: 5,
      name: "lisi",
    });

    const fn = () => {
      state.num++;
    };

    return {
      state,
      fn,
    };
  },
};
</script>

<style lang="less" scoped></style>
